<template>
	<div class="team-main" :class="{'act': !listArr.length}">
		<div class="team-box">
			<ul v-if="listArr.length">
				<li v-for="(kl, index) in listArr" :key="index">
					<h2>{{kl.nickname || '-'}}
						<i :class="{'act': kl.acount > 0 || kl.bcount > 0 || kl.ccount > 0}">
							{{ kl.acount > 0 || kl.bcount > 0 || kl.ccount > 0 ? '已购用户' : '未购用户' }}
						</i>
					</h2>
					<p>联系电话：{{ viewInfo(kl.loginNo) }}</p>
					<p>加入时间：{{ kl.createTime }}</p>
					<span><em>ID：{{kl.id}}</em></span>
				</li>
			</ul>
			<div class="team-none" v-else>
				<img src="../../../assets/images/icon_none.png" />
			</div>
		</div>
	</div>
</template>
<script>
	import { getChildrenInfo } from '@/api/';
	import vanBtn from '../../common/vanBtn';
	export default {
		components: {
			vanBtn
		},
		data() {
			return {
				listArr: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			viewInfo(t){
				if(!t) return '-'
				return t.substring(0, 3) + '****' + t.substring(t.length - 4, t.length)
			},
			init(){
				getChildrenInfo({
					pageNum: 1,
					pageSize: 20
				})
					.then(res => {
						this.listArr = []
						if (res.code === 200 && res.rows.length) {
							this.listArr = res.rows
						}
					})
					.catch(msg => {});
			}
		}
	}
</script>

<style lang="less" scoped>
	.team-main{
		height: 100vh;
		background: #f8f8f8;
		&.act{
			background: #fff;
		}
		.team-box{	
			.team-none{
				text-align: center;
				padding-top: 55%;
				>img{
					width: 70%;
				}
				>p{
					color: #999;
				}
			}
			>a{
				padding: 5%;
				display: block;
			}
			ul{
				padding: 5%;
				>li{
					background: #fff;
						box-shadow: 0 3px 4px rgba(0,0,0,.1);
						padding: 3% 6%;
						margin-bottom: 4%;
						border-radius: 20px;
						position: relative;
						>h2{
							font-weight: 500;
							font-size: 28px;
							padding-bottom: 12px;
							padding-top: 10px;
							>i{
								height: 40px;
								line-height: 40px;
								padding: 0 3%;
								background: #e8e8e8;
								border-radius: 10px;
								font-size: 20px;
								display: inline-block;
								margin-left: 2%;
								color: #666;
								&.act{
									background: #8e611f;
									color: #fff;
								}
							}
						}
						>p{
							font-weight: 500;
							line-height: 40px;
							font-size: 20px;
						}
						>span{
							position: absolute;
							right: 5%;
							top: 50%;
							margin-top: -30px;
							height: 60px;
							line-height: 60px;
							text-align: center;
							padding: 0 5%;
							font-weight: 500;
							font-size: 22px;
							background: #f2f2f2;
							border-radius: 40px;
							display: inline-block;
							>em{
								 background: linear-gradient(to right, red, blue);
								        -webkit-background-clip: text;
								        color: transparent;
							}
						}
				}
			}
		}
	}
	
</style>
